<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<div class="newInfo-page">
		      <div>
				  <img :src="info.newsImage" style="height:280rpx;object-fit: cover;width:100%"/>
			  </div>
			
			<div class="new-table">
				<div class="table-row">
					<div class="row-label">时间</div>
					<div class="row-text"> {{ info.showTime }}至{{ info.showEndTime }}</div>
				</div>
				<div class="table-row">
					<div class="row-label">地点</div>
					<div class="row-text">{{ info.areaInfo }}</div>
				</div>
				<div class="table-row">
					<div class="row-label">展馆</div>
					<div class="row-text">{{ info.newsTitle }}</div>
				</div>
				<div class="table-row">
					<div class="row-label">联系人</div>
					<div class="row-text"> {{ info.contacts}}</div>
				</div>
				<div class="table-row">
					<div class="row-label">联系电话</div>
					<div class="row-text">{{ info.phone }}</div>
				</div>
			</div>
			
			<div class="new-info" style="padding-bottom:150rpx">
				<u-parse :content="info.newsContent"></u-parse>
			</div>
			
			<div class="page-bottom-btn" style="left:0;padding:0 24rpx;">
				<u-button text="我要参展" type="primary" shape="circle" @click="showPop()" v-if="info.timeStatus != '已结束'"></u-button>
				<u-button text="展会已结束"  shape="circle"  v-else disabled color="#aaa"></u-button>
			</div>
			
	</div>
	
	
	<u-popup :show="show" mode="bottom" :round="10" @close="closeShow" >
	    <div class="popupTitle">我要参展</div>
		<div class="popup-con">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="100" errorType="toast">
				<u-form-item label="公司名称"   prop="company" borderBottom required>
					<u--input  placeholder="请输入公司名称" v-model="form.company" border="none" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="姓名" prop="name" borderBottom required>
						<u--input  placeholder="请输入姓名" v-model="form.name" border="none" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="手机号" borderBottom  prop="mobile" required>
					<u--input  placeholder="请输入手机号" v-model="form.mobile" border="none" inputAlign="right"></u--input>
				</u-form-item>
			</u--form>
		</div>
		<div class="u-flex popup-bottom">
			<u-button text="取消"  shape="circle" @click="closeShow"></u-button>
			<u-button text="确认"  shape="circle" type="primary" @click="saveForm" :loading="btnLoading"></u-button>
		</div>
	</u-popup>
	
	
	
  </div>
</template>

<script>
	const defaultForm = {
	  company: '',
	  mobile: '',
	  name: '',
	  newsId:''
	}
  import {getNewsDetail,addSignupAPI,pageSeo} from '@/config/api.js'
  import store from '@/store';
  export default {
    components: {
     

    },
    data() {
      return {
	     info:{},
	     show:false,
		 form: JSON.parse(JSON.stringify(defaultForm)),
		 btnLoading:false,
		 rules:{
		   company: [{
				required: true,
				message: '请输入公司名称',
				// 可以单个或者同时写两个触发验证方式
				trigger: ['blur', 'change']
			}],
			name: [{
				required: true,
				message: '请输入姓名',
				// 可以单个或者同时写两个触发验证方式
				trigger: ['blur', 'change']
			}],
			mobile: [{
				required: true,
				message: '请输入手机号',
				// 可以单个或者同时写两个触发验证方式
				trigger: ['blur', 'change']
			}],
		},
	
      }
    },

	async onLoad(options) {
    	await this.$onLaunched;	
        this.newsId = options.newsId
		getNewsDetail({newsId:options.newsId}).then((res)=>{
			this.info = res
		})
		
		// #ifdef H5
		pageSeo({pageType: 'expoDetailPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif	
		
    },

    methods: {
		showPop(){
			this.form = JSON.parse(JSON.stringify(defaultForm))
			this.form.newsId = this.newsId
			this.show = true
		},
		closeShow(){
			this.show = false
		},
		saveForm(){
		   this.$refs.form.validate().then(res => {
			   this.btnLoading = true;
			   let  data = JSON.parse(JSON.stringify(this.form));
				 addSignupAPI(data).then(()=>{
					   this.btnLoading = false;
					   this.closeShow();
					   uni.showToast({
						 title: '报名成功！',
						 icon: 'none',
						 duration: 2000,
					   });
				 }).catch(()=>{
					   this.btnLoading = false;
				 })
		   }).catch(errors => {
			
		   })
		},
	}
	

  }
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.newInfo-page{
	background: #fff;
	padding:36rpx;
	min-height: 100vh;
	.new-title{
		font-size: 28rpx;
		color: #000000;
	}
	.new-time{
		font-size: 22rpx;
		color: #8B8B8B;
		margin-top:20rpx;
	}
	.new-info{
		margin-top:40rpx;
		font-size: 24rpx;
		color:#000;
		line-height: 1.5;
	}
	.new-table{
		border: 1px solid #8B8B8B;
		margin:40rpx 0;
		.table-row{
			@include flexbox(flex-start,center);
			border-bottom:1px solid #8B8B8B;
			.row-label{
				text-align: center;
				width:145rpx;
				font-size:24rpx;
				padding:20rpx 0;
			}
			.row-text{
				border-left:1px solid #8B8B8B;
				font-size:24rpx;
				padding:20rpx;
				width:calc(100% - 145rpx);
				min-height:80rpx;
			}
			
		}
		.table-row:last-child{
			border-bottom:0 solid #8B8B8B;
		}
	}
	
}
	.popupTitle{
		font-size:$b-font;
		font-weight: bold;
		text-align: center;
		line-height: 50px;
	}
   .popup-con{
    	padding:0 16px 16px 16px;
    	
    }
    .popup-bottom{
    	background: #fff;
    	margin-top:10px;
    	padding:16px;
    }
    .popup-bottom-fixed{
    	position: fixed;
    	width:100%;
    	padding:16px;
    	box-sizing: border-box;
    	bottom:0
    }

</style>


    
    
